<template>
  <div>
    <search-condition @search="onSearch" @reset="onReset" :showOther="true"/>
    <el-card shadow="never" body-style="padding: 0 24px 24px;">
      <div class="clearfix" style="margin-bottom:16px">
        <div class="edu-page-title mg-bottom"
             v-if="(professionalAuditStandards && professionalAuditStandards.length) || (publicElectiveStandard && publicElectiveStandard.length)">
          <span style="margin-top: 15px;">{{$t("auditStandard.creditStandard")}}</span>
        </div>
        <!-- 专业审核标准-->
        <professional-audit-standards ref="professional" :isSetting="false" />
        <!-- 通识选修课标准 -->
        <public-elective-standard  ref="elective" :isSetting="false" />
      </div>
    </el-card>
  </div>
</template>
<script>
  import api from 'common/src/api/preparatoryGraduation/auditStandards';
  export default {
    name: "searchStandardTab",
    components: {
      searchCondition: () => import('./searchCondition'),
      professionalAuditStandards: () => import('./professionalAuditStandards'),
      publicElectiveStandard: () => import('./publicElectiveStandard')
    },
    data() {
      return {
        professionalAuditStandards: [],
        publicElectiveStandard: [],
        defaultPublicStandard: [{
          credit: 0
        }]
      };
    },
    methods: {
      onSearch(condition) {
        api.query(condition).then(res => {
          const data = res && res.data;
          this.professionalAuditStandards = data.professionalAuditStandards;
          this.publicElectiveStandard = data.publicElectiveStandard.length ?
            data.publicElectiveStandard : this.defaultPublicStandard;
          this.initTableContent();
        });
      },
      onReset() {
        this.professionalAuditStandards = [];
        this.publicElectiveStandard = [];
        this.initTableContent();
      },
      initTableContent() {
        this.$refs['professional'].init(this.professionalAuditStandards);
        this.$refs['elective'].init(this.publicElectiveStandard);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .mg-bottom{
    margin-bottom: 15px;
  }
  .edu-page-title {
    span {
      line-height: 24px;
      display: inline-block;
      padding-right: 10px;
      font-size: 18px;
      font-weight: bold;
      color: #2b3b4e;
    }
  }
</style>
